<template>
  <div class="tabControl">
    <div
      :class="['tab_item', index === isShow ? 'active' : '']"
      @click="handelActive(index)"
      v-for="(item, index) in tabList"
      :key="index"
    >
      <span class="name"> {{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: 0,
    };
  },
  props: {
    tabList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  mounted() {
    console.log(this.tabList);
  },
  methods: {
    handelActive(index) {
      this.isShow = index;
      this.$emit("tabClick", index);
    },
  },
};
</script>

<style lang='less' scoped>
.tabControl {
  display: flex;
  color: #666;
  height: 44px;
  .tab_item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    // margin: 0 30px;
  }
  .active {
    color: var(--color-tint);
  }
  .active .name {
    border-bottom: 2px solid var(--color-tint);
    padding: 6px 10px;
  }
}
</style>